<template>
  <div class="headContent">
    <el-row type="flex"
            justify="space-between">
      <el-col>
        <el-row type="flex"
                justify="start"
                class="title">
          <img src="@/assets/images/login/logo2.png" />
          <span>建筑室内环境健康性能监测与预警系统</span>
        </el-row>
      </el-col>
      <el-col>
        <el-row type="flex"
                justify="center"
                class="title">
          <span>{{ name }}</span>
          <img :src="logoUrl" />
        </el-row>
      </el-col>
      <el-col>
        <el-row type="flex"
                justify="end">
          <div>
            <span class="m-r time">{{ time }}</span>
          </div>
          <div style="cursor: pointer">
            <span @click="screen"
                  v-show="fullscreen">
              <i class="el-icon-switch-button"></i>退出
            </span>
            <span @click="screen"
                  v-show="!fullscreen">
              <i class="el-icon-full-screen"></i> 全屏
            </span>
          </div>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getNowTime } from "@/utils/time";
import { getImg } from "@/api/common";
export default {
  data() {
    return {
      time: "",
      title: "",
      fullscreen: false,
      name: "",
      logo: "",
      logoUrl: ""
    };
  },
  mounted() {
    this.name = this.$route.query.name;
    this.logo = this.$route.query.logo;
    let data = {
      key: this.logo
    };
    if(this.logo){
    getImg(data).then(res => {
      this.logoUrl = res.value;
    });
    }
    // this.title = this.$store.state.currentHospital.title;
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f6f6f6");
    this.time = getNowTime();
    setInterval(() => {
      this.time = getNowTime();
    }, 1000);
    let that = this;
    this.fullscreen = that.checkFull();
    window.onresize = function () {
      if (!that.checkFull()) {
        // 退出全屏后要执行的动作
        that.fullscreen = false;
      }
    };
  },
  beforeUnmount() {
    window.onresize = null;
  },
  methods: {
    checkFull() {
      //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
      //火狐浏览器
      var isFull =
        document.mozFullScreen ||
        document.fullScreen ||
        //谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled;
      if (isFull === undefined) {
        isFull = false;
      }
      return isFull;
    },
    screen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11

          element.msRequestFullscreen();
        }
      }

      this.fullscreen = !this.fullscreen;
    }
  }
};
</script>
<style lang="scss" scoped>
.headContent {
  color: #fff;
  line-height: 59px;
  height: 59px;
  width: 100%;
  padding: 0 20px;
  font-size: 20px;
  background-color: #2d9dff;
  .title {
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    box-sizing: border-box;
    img {
      height: 26px;
    }
    :first-child {
      margin-right: 10px;
    }
  }
}

// @media screen and (max-width:1770px) {
//   .headContent {
//       color: #fff;
//     height: 45px;
//     text-align: center;
//     line-height: var(--el-header-height);
//     .title {
//       font-size: 24px;
//       font-weight: bold;
//     }
//     .image {
//       padding: 2px;
//       box-sizing: border-box;
//       img {
//         height: 55px;
//       }
//     }
//     .time {
//       font-size: 16px;
//     }
//   }
// }
</style>
